@import "reset.scss";
$headerWidth:100px;
$red:red;
.box{
    width: 100%;
    height: 100%;
    .header{
        font-size: 18px;
        height: $headerWidth;
        position:relative;
        h1{
            width: 50px;
            height: $headerWidth;
            margin-left: 30px;
            
            img{
                width: 50px;
                height: 50px;
                margin-top: 25px; 
            }
        }
       .headerUl{
           width: 720px;
           height: $headerWidth;
           text-align: center;
           li{
               float:left;
               width: 120px;
               height: $headerWidth;
               line-height:$headerWidth;
               .neibie{
                   width: 1200px;
                   height: 80px;
                   border-top: 1px solid#ccc;
                   border-bottom: 1px solid#ccc;
                   position:absolute;
                   left:0;
                   top:100px;
                   display:none;
                   li{
                       width: 171px;
                       height: 80px;
                       line-height: 80px;
                       font-size:14px;
                       float:left;
                      
                   }

               }   
           }
           li:hover{
               color:$red;
           }
           .headerUlLi2:hover{    
            .neibie{
                color:black;
                z-index: 1;
                display:block;
                background-color: rgba(235, 218, 165,.5);
            }
        }
           
       } 
       .headerp1{
           width: 200px;
           height: 30px;
           line-height: 30px;
           border:1px solid #ccc;
           border-radius: 10px;
           position:relative;
           margin-top: 35px;
           margin-left: 25px;
           
           .icon-sousuo{
               font-size:24px;
                position:absolute;
                right:5px;
                top: 0;
           }
       }
       .icon-gerenxinxi{
           margin-left: 55px;
           font-size:24px;
           margin-top: 38px;
           position:relative;
           #xinxibox{
            width: 80px;
            height: 120px;
            position:absolute;
            display:none;
            padding: 15px;
            // border:1px solid #ccc;
            li{
                width: 80px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                font-size:14px;
            }
       }  
    }
       .icon-gerenxinxi:hover{
           color:$red;
            #xinxibox{
                z-index: 1;
                background-color: rgba(235, 218, 165,.5);
                display:block;
                color:black;
                left:-40px;
                top:25px;
                #xinxibox li:first-child{
                    color:orange;
                }
            }
       }
       .icon-tubiaolunkuo-{
            font-size:26px;
            margin-top: 38px;
            margin-left:15px;
            position: relative;
            text-align: center;
            #shoppingcar{
                font-size:12px;
               width: 15px;
               height: 15px;
               border-radius: 50%;
               background-color:$red;
               position:absolute;
               top:-6px;
               right:0px;
               color:white;
                display:none;
            }
       }
       .icon-tubiaolunkuo-:hover{
            color:$red; 
            // #shoppingcar{
            //     z-index: 1;
            //     background-color: rgba(235, 218, 165,.5);
            //     display:block;
            //     position:absolute;
            //     left:-60px;
            //     top:35px;
            //     border:1px solid #ccc;
            // }
       }
   }
// banner
    .banner{
        position: relative;
        .bnContent{
            width: 100%;
            height: 400px;
            
            li{
                width: 100%;
                height: 400px;
                display:none;
                img{
                    width: 100%;
                    height: 400px;  
                } 
            }
            .bnSelected{
                display:block;
            }
        }
        .bnNav{
            width: 120px;
            height: 10px;
            margin: auto;
            position:absolute;
            left:45%;
            bottom:20px;
            li{
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color:rgba(17, 0, 0, 0.8);
                float:left;
                margin-left: 30px;
            }
            .bnSelected{
                background-color: $red;
            }
        }

    }
//content

    .content{
        margin-top: 80px;
        background-color: rgba(204, 204, 204,.2);
        .cngift{
            text-align: center;
            
            li{
                width: 25%;
                height: 220px;
                float:left;
                img{
                    padding: 3%;
                    width:94%;
                    height: 200px;
                }
            }
          
        }
        .cnNew{
            .cnNewP{
                padding: 30px;
                background:white url(../images/title_bg.png) center no-repeat;
                span{
                  font-size:16px;
                }
            }
            .newUl{
                width: 99%;
                padding:1%;
               li{
                  width: 22%;
                  margin-left: 2%;
                  height: 270px;
                  float:left;
                  text-align: center;
                  margin-bottom: 10px;
                  transition: all 0.3s;
                  
                //   background-color:white;
                  img{
                      width: 94%;
                      height: 210px;
                  }
                  p{
                      font-size:16px;
                      height: 30px;
                      line-height: 30px;
                  }  
               }
               li:hover{
                -webkit-box-shadow: 2px 2px 8px 1px rgba(20, 20, 20, 0.15);
                 -moz-box-shadow: 2px 2px 8px 1px rgba(20, 20, 20, 0.15);
                 box-shadow: 2px 2px 8px 1px rgba(20, 20, 20, 0.15); 
               }
               .newUlLi1:hover{
                box-shadow:0 0 10px 5px white;
               }
                 li:first-child img{
                   height: 270px;
                  
               }
            }    
        }
        .cnBirthday{
            .cnBirthdayP{
                padding: 30px;
                background:white url(../images/title_bg.png) center no-repeat;
                span{
                    font-size:16px;
                } 
            }
            .cnBirthday1{
                width: 19%;
                padding:2%;
                height: 540px;
                margin-bottom: 10px;
                img{
                    width: 100%;
                    height: 540px;
                }
            }
            .cnBirthday2{
                width: 74%;
                padding:1%;
                height: 560x;
               
                li{
                    width: 31%;
                    margin-left: 2%;
                    height: 270px;
                    margin-bottom:10px;
                    float:left;
                    text-align: center;
                    transition: all 0.3s;
                    img{
                        width: 94%;
                        height: 200px;
                    }
                    p{
                      height: 30px;
                      font-size:16px; 
                    }
                    div{
                        height: 30px;
                    }
                }
                li:hover{
                    -webkit-box-shadow: 2px 2px 8px 1px rgba(20, 20, 20, 0.15);
                 -moz-box-shadow: 2px 2px 8px 1px rgba(20, 20, 20, 0.15);
                 box-shadow: 2px 2px 8px 1px rgba(20, 20, 20, 0.15); 
                }
               
            }
        }
        .cnDesign{
            .cnDesignP{
                padding: 30px;
                background:white url(../images/title_bg.png) center no-repeat;
                span{
                font-size:16px;
                } 
            }
            .cnDesign1{
                width: 19%;
                padding:2%;
                height: 540px;
                margin-bottom: 10px;
                img{
                    width: 100%;
                    height: 540px;
                }
            }
            .cnDesign2{
                width: 74%;
                padding:1%;
                height: 560x;
                li{
                    width: 31%;
                    margin-left: 2%;
                    height: 270px;
                    margin-bottom:10px;
                    float:left;
                    text-align: center;
                    transition: all .3s;
                    img{
                        width: 94%;
                        height: 200px;
                    }
                    p{
                      height: 30px;
                      font-size: 16px; 
                    }
                    div{
                        height: 30px;
                    }
                }
                li:hover{
                -webkit-box-shadow: 2px 2px 8px 1px rgba(20, 20, 20, 0.15);
                 -moz-box-shadow: 2px 2px 8px 1px rgba(20, 20, 20, 0.15);
                 box-shadow: 2px 2px 8px 1px rgba(20, 20, 20, 0.15); 
                }
            }
        }
    }
    .chakan{
        width: 100%;
        height: 100px;
        text-align: center;
        line-height: 100px;
        background-color: white;
        font-size:16px;
    }
}
// footer fixed
.box1{
    width: 100%;
    // position:fixed;
    // left: 0;
    // bottom:0;
    background-color:rgba(51, 51, 51, 0.9);
    
    .footer{
        
        color:white;
        .footer1{
            width: 100%;
            border-bottom:1px solid rgba(255,255,255,.5);
            text-align: center;
            h1{
                width: 20%;
                height: 100px;
                float:left;
                line-height: 100px;
                font-size:30px;
                color:$red;
                img{
                    width: 80px;
                    height: 80px;
                    border-radius: 50%;
                    margin-top: 10px;
                }
                span{
                   height: 80px;
                   margin-top: 10px;

                }

            }
           h3{
               float:left;
               width: 20%;
               height: 100px;
               line-height: 100px;
               font-size:20px;
           }
        }
        .footer2{
            height: 50px;
            p{
                line-height: 50px;
                float:left;
            }
            ul{
                height: 50px;
                li{
                    float:right;
                    text-align: center;
                    line-height: 30px;
                    span{
                        display: inline-block;
                        width: 20px;
                    }
                }
            }

        }
    }
}
.fixed{
    position:fixed;
    right:0;
    bottom:25%;
    z-index: 1;
    div{
        font-size:50px;
        margin-top:10px;
        color:rgba(255,0,0,.5)
    }
}

//zhuce
.box{
    width: 100%;
    height: 100%;
    .loginHeader{
        h1{
           
            height: 100px;
            float:left;
            line-height: 100px;
            font-size:35px;
            color:$red;
            img{
                width: 80px;
                height: 80px;
                border-radius: 50%;
                margin-top: 10px;
            }
        }
        p{
            float:right;
            height: 100px;
            span{
                font-size:18px;
                line-height: 100px;
            }
            #login:hover{
                color:$red;
            }
            #join:hover{
                color:$red;
            }
        }
    }
}
.jionbox{
    width: 100%;
    height: 500px;
    margin: auto;
    background-color: rgba(204, 204, 204, 0.2);
    position: relative;
    background:url(../images/login1.jpg) no-repeat;
    background-size:100% 100%;
   
    .jionContent{
        width: 400px;
        height: 350px;
        margin: auto;
        padding-left: 150px;
        // background: white;
        position:absolute;
        top: 100px;
        right:40px;

       h3{
           font-size:30px;
           font-weight: normal;
           .icon-xinyonghuming{
               color:blue;
               font-size:30px;
           }
       }
       .judge{
           display:none;
       }
       input{
           border:1px solid #ccc;
           font-size:16px;
           height: 30px;
           line-height: 30px;
           margin-top: 10px;
           border-radius: 10px;
       }
       p{
           margin-top: 10px;
           line-height: 30px;
       }
       #joinBtn,#loginBtn{
           width: 198px;
           height: 40px;
           line-height: 40px;
           font-size:16px;
           text-align: center;
           border-radius: 20px;
           background-color:rgba(204,51,0,.5);
       }
       #loginBtn{
        margin-top: 10px;
        line-height: 30px;
       }
       #memory{
            float:left;
       }
       span{
           float:left;
           margin-top: 16px;
       }
   
    }
}

//fenye
.box{
    .fenyebanner{
        img{
            width: 100%;
            height: 400px;
        }
    }
    .headerp2{
        width: 100%;
        height: 50px;
        span{
           float:left;
            line-height: 50px;
            padding-right: 20px;
        }
    }
    .fenyecontent{
        margin-top: 20px;
        .ctNav{
            height: 70px;
            text-align: center;
            li{
                height: 30px;
                line-height: 30px;
                float:left;
                font-size:14px;   
            }
            span{
                display:inline-block;
                width: 40px;
            }
        }
        .goodsbox{
            background-color: rgba(204, 204, 204,.2);
            .goodsLi{
                width: 25%;
                height: 300px;
                float:left;
                text-align: center;
                img{
                   padding:3%;
                   width: 250px;
                   height: 200px;
                }
                p{
                    font-size:16px;
                    height: 30px;
                    text-align: left;
                    margin-left: 18%;
                }
                div{
                    color:$red;
                    font-size:16px;
                    text-align: left;
                    margin-left: 18%;
                    height: 30px;
                }
            }
        }
        .page {
            width: 300px;
            height: 30px;
            margin: 20px auto;
            color:black;
            
            span {
                float: left;
                width: 60px;
                height: 30px;
                // background-color: #594d64;
                border:1px solid #aaa;
                // color: #ffffff;
                text-align: center;
                line-height: 30px;
                margin-left: 5px;
            }
            ul {
                float: left;
                li {
                    float: left;
                    width: 30px;
                    height: 30px;
                    text-align: center;
                    line-height: 30px;
                    // background-color: #160c05;
                    border:1px solid #aaa;
                    // color: #ffffff;
                    margin-left: 5px;
                }
                .select{
                    background-color: rgba(255,0,0,.3);
                }
        
            }
            .disabled {
                background-color: #cdcdcd;
            }
        }

        
            
    }
}
//xiangqiye
.box {
    .xiangqing {
        position:relative;
        .picture{
        
            width: 400px;
            height: 400px;
          
            position:relative;
            #smallShadow{
                position:absolute;
               display:none;
                width: 50px;
                height: 50px;
                border-radius: 50px;
            
            }
            img{
                width: 400px;
                height: 400px;
               
            }
            #shadow{
                position:absolute;
                width: 100px;
                height: 100px;
                border-radius: 50%;
                overflow: hidden;
                top:0px;
                left:400px;
               display:none;
                img{
                width: 800px;
                height: 800px;
                position:absolute;
                left: 0;
                top: 0;  
                }
            }
        }
        .carNav{
            width: 400px;
            height: 125px;
            li{
                margin-right: 10px;
                float:left;
                img{
                    width: 123px;
                    height: 125px;
                }
            }
        }
    
    }
    .xiangqing2{
       width: 500px;
       margin-left: 150px;
       font-size: 14px;
      
       h1{
           width: 500px;
           height: 50px;
           font-size:30px;
       };
       .xqp1{
           line-height: 30px;
           font-size:14px;
           width: 500px;
           border-bottom:1px solid #ccc;
       }
       h3{
           font-size:30px;
           color:$red;
           line-height: 60px;
           border-bottom:1px solid #ccc;
       }
       .xqp2{
           margin-top: 50px;
           line-height: 30px;
       }
       ul{
           font-size:14px;
           width: 500px;
           text-align: center;
           li{
               line-height: 30px;
               float:left;
               width: 80px;
               border:1px solid #ccc;
               margin-right: 10px;
           }
       }
       li:hover{
           border:1px solid $red;
       }
       .buybox{
           margin-top: 50px;
           text-align: center;
           #buy{
               float:left;
               width: 350px;
               line-height: 40px;
               background-color: $red;
               color:white;

           }
           .icon-xihuan{
               font-size: 35px;
               color:#ccc;
           }
        .icon-xihuan:hover{
            color:$red;
        }
       }
    }
}

//shopping
.box{
    .spheader{
        display:none;
        margin-top: 30px;
        text-align: center;
        border-bottom:1px solid #ccc;
        li{
            // border:1px solid black;
            float:left;
            font-size:16px;
            height: 40px;
            width: 11%;
        }
        .spheaderLi{
            width: 50%;
            padding-left:40px;
            text-align: left;
        } 
    }
    .spcontent{
        min-height:300px;
        background:url(../images/shopping.jpg) no-repeat;
        position:relative;
        .sptr{
            text-align: center;
            border-bottom:1px solid #ccc;
            li{
                float:left;
                font-size:16px;
                height: 150px;
                width: 11%;
                line-height: 150px;  
            }
            .sptrli1{
                width: 50%;
                padding-left:40px;
                text-align: left;
                font-size:12px;
                color:#aaa;
                img{
                    width: 100px;
                    height: 100px;
                    margin-top: 25px;
                    float:left;
                }
                .sptr1{
                    margin-left:10px;
                    margin-top: 35px;
                    div{
                        line-height: 20px;
                        color:black;
                    }
                    p{
                        line-height: 25px;  
                    }
                }
                
            }
            .sptr3{
                .sptr3div{
                    height: 30px;
                    margin-left: 25%;
                    margin-top: 60px;
                    border:1px solid #ccc;
                    text-align: center;
                    width: 90px;
                   span{
                       float:left;
                       line-height: 30px;
                       width: 30px;
                       
                   }
                }
               
            }

        }
        
        
    }
    .spfooter{
        margin-bottom:30px;
        font-size:16px;
        display:none;
        div{
            float:left;
            line-height: 50px;
            width:64%;
            margin-top: 30px;
        }
        p{
            width: 12%;
            line-height: 50px;
            float:left;
            margin-top: 30px;
            .icon-qian{
                color:$red;
            }
        }
        #pay{
            background-color:rgba(255,0,0,.2);
            text-align: center;
            border-radius: 10px;
        }
    }
}